<template>
    <div class="tk_view_box">
        <div class="tk_view_top flexbox flexcenter" @click="is_show = !is_show">
            <i class="el-icon-caret-right"></i>
            <div class="tk_view_left">
                <div class="tk_view_title">广告组预算和出价优化</div>
                <div class="tk_view_num">预算和出价优化组数量 x {{tableData.length}}</div>
            </div>
        </div>
        <div class="tk_view_content" v-if="is_show">
            <el-table :data="tableData" max-height="340" class="view_table" ref="multipleTable">
                <el-table-column prop="delname" label="组名称"></el-table-column>
                <el-table-column prop="budget_mode" label="预算类型">
                    <template slot-scope="scope">
                        {{budget_mode[scope.row.budget_mode]}}
                    </template>
                </el-table-column>
                <el-table-column prop="budget" label="预算"></el-table-column>
                <el-table-column prop="optimization_goal" label="优化目标">
                    <template slot-scope="scope">
                        {{optimization_goal[scope.row.optimization_goal]}}
                    </template>
                </el-table-column>
                <el-table-column prop="bid_type" label="竞价策略">
                    <template slot-scope="scope">
                        <template v-if="scope.row.optimization_goal=='VALUE'">
                            最高价值
                        </template>
                        <template v-else-if="scope.row.optimization_goal=='CLICK'">
                            <template v-if="scope.row.bid_type=='BID_TYPE_CUSTOM'">
                                {{bid_type[scope.row.bid_type]}}:{{scope.row.bid_price}}/点击
                            </template>
                            <template v-else>
                                {{bid_type[scope.row.bid_type]}}
                            </template>
                        </template>
                        <template v-else-if="scope.row.optimization_goal=='CONVERT'|| scope.row.optimization_goal=='CONVERT1'">
                            <template v-if="scope.row.bid_type=='BID_TYPE_CUSTOM'">
                                {{bid_type[scope.row.bid_type]}}:{{scope.row.conversion_bid_price}}/转化
                            </template>
                            <template v-else>
                                {{bid_type[scope.row.bid_type]}}
                            </template>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="billing_event" label="计费点">
                    <template slot-scope="scope">
                        {{billing_event[scope.row.billing_event]}}
                    </template>
                </el-table-column>
                <el-table-column prop="pacing" label="投放速度">
                    <template slot-scope="scope">
                        {{pacing[scope.row.pacing]}}
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    props: ["dataForm"],
    components: {},
    name: "",
    data() {
        return {
            is_show:false,
            tableData:[],
            budget_mode:{
                BUDGET_MODE_DAY:"日预算",
                BUDGET_MODE_TOTAL:"总预算",
            },
            bid_type:{
                BID_TYPE_CUSTOM:"成本上限",
                BID_TYPE_NO_BID:"最低成本",
            },
            billing_event:{
                CPC:"点击（CPC）",
                OCPM:"展现（oCPM）",
            },
            optimization_goal:{
                VALUE:"价值",
                CLICK:"点击",
                CONVERT:"开始结账",
                CONVERT1:"付费数",
            },
            pacing:{
                PACING_MODE_SMOOTH:"标准",
                PACING_MODE_FAST:"速度",
            }
        };
    },
    created() {
        this.tableData = this.dataForm.adgroup.delivery
    },
    methods: {},
};
</script>


<style scoped>
.tk_view_box{
    margin-bottom: 10px;
}
.tk_view_top {
    height: 65px;
    padding: 0 20px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background: rgba(165, 177, 209, 0.1);
    cursor: pointer;
}
.tk_view_top .el-icon-caret-right {
    font-size: 18px;
    color: #616c85;
}
.tk_view_left {
    margin-left: 20px;
}
.tk_view_title {
    font-size: 14px;
    color: #17233d;
    line-height: 20px;
}
.tk_view_num {
    font-size: 12px;
    color: #b4b7bd;
    line-height: 17px;
    margin-top: 4px;
}
.tk_view_content {
    border: 1px solid #ebebeb;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-top: 0;
    padding: 0 20px;
}
/deep/ .view_table.el-table th{
    background-color: #fff;
    font-weight: normal;
}
/deep/ .view_table.el-table th.is-leaf{
    border-bottom: 1px solid #f1f2f3 !important;
}
/deep/ .view_table.el-table::before{
    display: none;
}
</style>

